<template>
  <div class='container'>
 <!-- 提示 -->
      <el-alert
            :closable="false"
            :title="`数据一共${questionChoice.counts}条`"
            type="info"
            class="hint"
            show-icon>
          </el-alert>
          <!-- 已审核列表 -->
          <my-table
          class="container"
          :table-props="{
            data: questionChoice.items,
            border: true
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 180, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center'},
            { label: '目录', prop: 'catalogID', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', slotName: 'question', width: 180, align: 'center' },
            { label: '录入时间', prop: 'addDate', sortable: true, align: 'center', width: 180 },
            { label: '难度', prop: 'difficulty', align: 'center',width: 180},
            { label: '录入人', prop: 'creator', width: 180, width: 180, align: 'center'},
            { label: '审核状态', prop: 'chkState', width: 180, width: 180, align: 'center'},
            { label: '审核意见', prop: 'chkRemarks', width: 180, width: 180, align: 'center'},
            { label: '审核人', prop: 'chkUser', width: 180, width: 180, align: 'center'},
            { label: '发布状态', prop: 'publishState', width: 180, width: 180, align: 'center'},
            { label: '操作', width: 180, align: 'center', slotName: 'handle', width: 300, fixed: 'right'},
          ]"

          :pagination-props="{
            layout: 'sizes, prev, pager, next, jumper',
            total: questionChoice.counts,
            currentPage: page,
            pageSize: pageSize,
            pageSizes: [10, 20, 30, 40],
          }"
          :pagination-events="{
            'current-change': onCurrentPageChange,
            'size-change': onPageSizeChange
          }"
        >
          <template v-slot:handle="scope" >
            <el-button type="text" @click="onPreview(scope.row.id)">预览</el-button>
            <!-- <el-button type="text" @click="onAddCompanyList(scope.row.id)" :disabled="audit">审核</el-button> -->
            <el-button type="text" @click="onRemove(scope.row.id)" :disabled="scope.row.publishState === '已上架'">修改</el-button>
            <el-button type="text" @click="onAddChoice(scope.row.id)">{{scope.row.publishState === '已上架' ? '下架' : '上架'}}</el-button>
            <el-button type="text" @click="onAddChoice(scope.row.id)" :disabled="scope.row.publishState === '已上架'">删除</el-button>

          </template>
          <template v-slot:question="scope" >
            <span v-html="scope.row.question"></span>
          </template>
          </my-table>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  // props: {
  //   questionChoice1: {
  //     type: Object,
  //     default: () => ({})
  //   },
  // },
  data() {
    return {
      page: 1,
      pageSize: 10,
    }
  },
  methods: {
        ...mapActions('questions', ['updateQuetionList', 'updateQuetionDetail', 'updateQuetionChoice']),
     // 点击下一页
    onCurrentPageChange(val) {
      this.page = val
      this.updateQuetionChoice({
        page: this.page,
        pagesize: this.pageSize
      })
    },
    onPageSizeChange(val) {
      this.page = 1
      this.pageSize = val
      this.updateQuetionChoice({
        page: this.page,
        pagesize: this.pageSize
      })
    },
  },
  computed: {
      ...mapState('questions', ['questionList', 'questionDetail', 'questionChoice']),
  }
}
</script>

<style scoped lang='less'></style>







<!-- 提示 -->
          <el-alert
            :closable="false"
            :title="`数据一共${questionChoice.counts}条`"
            type="info"
            class="hint"
            show-icon>
          </el-alert>
          <!-- 已拒绝列表 -->
          <my-table
          class="container"
          :table-props="{
            data: questionChoice.items,
            border: true
          }"
          :columns="[
            { label: '试题编号', prop: 'number', width: 180, align: 'center' },
            { label: '学科', prop: 'subject', width: 180, align: 'center'},
            { label: '目录', prop: 'catalogID', width: 180, align: 'center' },
            { label: '题型', prop: 'questionType', width: 180, align: 'center' },
            { label: '题干', slotName: 'question', width: 180, align: 'center' },
            { label: '录入时间', prop: 'addDate', sortable: true, align: 'center', width: 180 },
            { label: '难度', prop: 'difficulty', align: 'center',width: 180},
            { label: '录入人', prop: 'creator', width: 180, width: 180, align: 'center'},
            { label: '审核状态', prop: 'chkState', width: 180, width: 180, align: 'center'},
            { label: '审核意见', prop: 'chkRemarks', width: 180, width: 180, align: 'center'},
            { label: '审核人', prop: 'chkUser', width: 180, width: 180, align: 'center'},
            { label: '发布状态', prop: 'publishState', width: 180, width: 180, align: 'center'},
            { label: '操作', width: 180, align: 'center', slotName: 'handle', width: 300, fixed: 'right'},
          ]"

          :pagination-props="{
            layout: 'sizes, prev, pager, next, jumper',
            total: questionChoice.counts,
            currentPage: page,
            pageSize: pageSize,
            pageSizes: [10, 20, 30, 40],
          }"
          :pagination-events="{
            'current-change': onCurrentPageChange,
            'size-change': onPageSizeChange
          }"
        >
          <template v-slot:handle="scope" >
            <el-button type="text" @click="onPreview(scope.row.id)">预览</el-button>
            <el-button type="text" @click="onAddCompanyList(scope.row.id)" :disabled="audit">审核</el-button>
            <el-button type="text" @click="onRemove(scope.row.id)" :disabled="scope.row.publishState === '已上架'">修改</el-button>
            <el-button type="text" @click="onAddChoice(scope.row.id)">{{scope.row.publishState === '已上架' ? '下架' : '上架'}}</el-button>
            <el-button type="text" @click="onAddChoice(scope.row.id)" :disabled="scope.row.publishState === '已上架'">删除</el-button>

          </template>
          <template v-slot:question="scope" >
            <span v-html="scope.row.question"></span>
          </template>
          </my-table>
